<template>
  <a-avatar :size="32" shape="square">
    <img
      :alt="dataSource.file_ext"
      :src="previewImg"
    />
  </a-avatar>
</template>

<script setup lang="ts">
import { computed, defineProps, PropType } from "vue";
import FolderIcon from "@/assets/images/drive/folder.png";
import FileIcon from "@/assets/images/drive/file.png";
import MusicIcon from "@/assets/images/drive/music.png";
import MovieIcon from "@/assets/images/drive/movie.png";
import DocIcon from "@/assets/images/drive/document.png";
import ZipIcon from "@/assets/images/drive/compress.png";

interface FileType {
  file_type: number; // 10 图片 20 视频 30 音频 40 文档 50 压缩包 0 其他
  file_ext: string; // 文件后缀名
  file_path: string;
}

const props = defineProps({
  dataSource: {
    type: Object as PropType<FileType>,
    required: true
  }
});

const previewImg = computed(() => {

  if (props.dataSource?.is_folder) {
    return FolderIcon;
  }
  if (props.dataSource?.file_type === 10) {
    return props.dataSource.file_path;
  }
  if (props.dataSource?.file_type === 20) {
    return MovieIcon;
  }
  if (props.dataSource?.file_type === 30) {
    return MusicIcon;
  }
  if (props.dataSource?.file_type === 40) {
    return DocIcon;
  }
  if (props.dataSource?.file_type === 50) {
    return ZipIcon;
  }
  console.log(props.dataSource);
  return FileIcon;
});
</script>

<style scoped lang="less">

</style>
